<template>
	<view>
		<view class="example-body">
			<button class="buttonOpen" 
			type="primary" 
			:style="{ backgroundColor:activeId === item.id ? '#a7a7a7' : '#007AFF'}" 
			v-for="item in skillsStore.skillList" 
			:key="item.id" 
			@click="showDrawer(item.id)">
				<text class="word-btn-white">{{item.skillName}}</text>
			</button>
			
			<uni-drawer class="drawer" ref="showLeft" mode="right" :width="300" >
				<scroll-view style="height: 100%;" scroll-y="true">
					<button @click="closeDrawer">
						<uni-icons class="icon" type="closeempty" size="20"></uni-icons>
						<text>详情</text>
					</button>
					<view class="detailContent">
						<view class="name">
							<text >{{skillsStore.skillList[index].deTail.name}}</text>
						</view>

						<view class="score">
							<text>熟练程度：</text>
							<uni-rate  readonly touchable :value="skillsStore.skillList[index].deTail.starValue" size="25" />
							<text >{{skillsStore.skillList[index].deTail.starValue}}分</text>
						</view>
						<view class="longTime">
							<text>学习时长：</text>
							<text>{{skillsStore.skillList[index].deTail.studyTime}}</text>
						</view>
						<view class="experience">
							<text>项目经验：</text>
							<text class="experienceContent">{{skillsStore.skillList[index].deTail.project}}</text>
						</view>
					</view>

				</scroll-view>
			</uni-drawer>
		</view>
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import { useSkillsStore } from '@/stores/skills.js';
	import {onLoad} from '@dcloudio/uni-app';
	let index=ref();
	const skillsStore = useSkillsStore();
	let activeId = ref(-1);
	let showLeft = ref(true);
	onLoad((options)=>{
		 if (options.id && !isNaN(options.id)) {
		        index.value = Number(options.id) - 1;
				activeId.value = options.id
		    } else {
		        console.error('Invalid id parameter');
		        // 可以设置一个默认值或处理错误情况
		        index.value = 0;
		    }
	})
	onMounted(()=>{
		 showLeft.value.open();
		            
		
		   
	})
	//点击打开窗口
	function showDrawer(id) {
		showLeft.value.open();
		index.value=Number(id)-1;
		activeId.value = id;
	}
	// 关闭窗口
	function closeDrawer() {
		showLeft.value.close();
		index.value=0;
		activeId.value=-1
	}
	
</script>

<style lang="scss" scoped>
	.example-body {
		padding: 10px;
		position: absolute;
		left: 30rpx;

		.buttonOpen {
			width: 230rpx;
			margin-bottom: 20rpx;
			justify-content: center;
		}

		.drawer {
			
			.icon {
				position: absolute;
				left: 20rpx;
			}

			.detailContent {
				font-size: 40rpx;
				padding: 30rpx;
				
				.name {
					font-size: 60rpx;
					text-align: center;

				}

				.score {
					display: flex;
					align-items: center;
					padding-top: 20rpx;
				}

				.longTime {
					padding-top: 20rpx;
				}

				.experience {
					padding-top: 20rpx;

					.experienceContent {

						white-space: normal;
					}
				}
			}
		}

	}
</style>